<template>
	<div>
		<div>
			<template v-if="item.form_type == 'text' || item.form_type == 'mobile'">
				<el-input 
					v-model="formData[item.field]" 
					class="forminput"
					:placeholder="item.input_tips">
				</el-input>
			</template>
			<!-- select单选框 -->
			<template v-if="item.form_type == 'select'">
				<el-select 
					v-model="formData[item.field]" 
					filterable 
					clearable
					:placeholder="item.input_tips"
					value-key="field"
					class="forminput">
					<el-option
						v-for="(fieldItem,fieldIndex) in item.setting" 
						:key="fieldIndex" 
						:label="fieldItem" 
						:value="fieldItem">
					</el-option>
				</el-select>
			</template>
			<!-- select多选框 -->
			<template v-if="item.form_type == 'select-multiple'">
				<el-select 
					v-model="formData[item.field]" 
					filterable 
					multiple 
					:placeholder="item.input_tips"
					class="forminput">
					<el-option
						v-for="(fieldItem,fieldIndex) in item.setting" 
						:key="fieldIndex" 
						:label="fieldItem" 
						:value="fieldItem">
					</el-option>
				</el-select>
			</template>
			<!-- Cascader 级联选择器 -->
			<template v-if="item.form_type == 'cascader'">
				<el-cascader class="forminput" :options="item.setting" clearable></el-cascader>
			</template>
			<!-- textarea文本框 -->
			<template v-if="item.form_type == 'textarea'">
				<el-input 
					v-model="formData[item.field]" 
					type="textarea" 
					autosize
					style="width: 530px;"
					:rows="3"
					:placeholder="item.input_tips">
				</el-input>
			</template>
			<!-- 带小数点数字文本框 -->
			<template v-if="item.form_type == 'float'">
				<el-input 
					type="number" 
					step='0.01'
					v-model="formData[item.field]" 
					class="forminput"
					:placeholder="item.input_tips">
				</el-input>
			</template>
			<!-- 带小数点金额文本框 -->
			<template v-if="item.form_type == 'money'">
				<el-input 
					type="number" 
					step='0.01'
					v-model="formData[item.field]" 
					class="forminput"
					:placeholder="item.input_tips">
					<template slot="append">元</template>
				</el-input>
			</template>
			<!-- 带小数点金额文本框 -->
			<template v-if="item.form_type == 'per'">
				<el-input 
					type="number" 
					step='0.01'
					v-model="formData[item.field]" 
					class="forminput"
					:placeholder="item.input_tips">
					<template slot="append">%</template>
				</el-input>
			</template>
			<!-- date日期选项 -->
			<template v-if="item.form_type == 'date'">
				<el-date-picker
					class="forminput datecss"
					v-model="formData[item.field]"
					type="date"
					:placeholder="item.input_tips"
					value-format="yyyy-MM-dd">
				</el-date-picker>
			</template>
			<template v-if="item.form_type == 'datetime'">
				<el-date-picker
					class="forminput datecss"
					v-model="formData[item.field]"
					type="datetime"
					:placeholder="item.input_tips"
					value-format="yyyy-MM-dd HH:mm">
				</el-date-picker>
			</template>
			<!-- 用户选择 -->
			<template v-if="item.form_type == 'user'">
				<xh-user-cell
					:item="item"
					:value="userArr['user_'+item.field]"
					@value-change="arrayValueChange"/>
			</template>
			<template v-if="item.form_type == 'user-multiple'">
				<xh-user-cell
					class="forminput"
					:item="item"
					:radio="false"
					:value="userArr['user_'+item.field]"
					@value-change="arrayValueChange"/>
			</template>
			
			<!-- 附件 -->
			<template v-if="item.form_type == 'file'">
				<file-upload
					:field="item.field"
					:remark="item.input_tips"
					:model-name="crmType"
					:fileinfo="formData.file"
					@uploadFile="uploadFile"/>
			</template>
			<!-- dialog -->
			<template v-if="item.form_type == 'dialog'">
				<crm-relative-cell
					:value="relationInfo.value"
					:index="0"
					:item="relationInfo"
					:crm-type="item.field"
					:radio="true"
					:disabled="relationInfo.disabled"
					@value-change="fieldValueChange"/>
			</template>
		</div>
	</div>
</template>

<script>
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	import FileUpload from "./FileUpload"
	import { XhUserCell } from '@/components/user'
	export default {
		data() {
			return {
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
				userArr:{
					user_owner_user_id:[]
				},
			}
		},
		components: {
			CrmRelativeCell,
			FileUpload,
			XhUserCell
		},
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			formData:{
				type:Object,
				default:()=>{}
			},
			crmType:{
				type:String,
				default:''
			},
		},
		
		methods: {
			// 选中关联信息
			fieldValueChange(data) {
				if(!data.value.length) return this.formData[data.type] = ''
				this.$set(this.formData,data.type,data.value[0].id)
			},
			
			// 附件上传
			uploadFile(file_ids,field){
				this.$set(this.formData,field,file_ids)
			},
			
			/**
			 * 用户
			 */
			arrayValueChange(data) {
				if (data.value.length > 0) {
					let arr = []
					for(let i=0;i<data.value.length;i++){
						arr.push(data.value[i].id)
					}
					this.formData[data.item.field] = arr.join(',')
				} else {
					this.formData[data.item.field] = ''
				}
			},
		},
	}
</script>

<style scoped="scoped">
	.forminput{
		width: 200px;
	}
	/deep/ .el-form-item__content{
		display: inline-block;
		line-height: 40px;
		width: 200px;
	}
	/deep/ .el-input__inner {
	    height: 40px;
	    line-height: 40px;
	    outline: none;
	    padding: 0 15px;
	}
	/deep/ .el-form--label-top .el-form-item__label {
		padding:0 10px 0 0;
	}
	/deep/ .el-form-item {
	    margin-bottom: 23px !important;
		position: relative;
	}
	/deep/ .el-form-item__label {
	    text-align: left !important;
	    vertical-align: middle !important;
	    float: left;
	    font-size: 14px;
	    color: #606266;
	    line-height: 40px !important;
	    padding: 0 12px 0 0;
	    box-sizing: border-box;
		width: 95px !important;
	}
	/deep/ .el-form-item__content {
		width: auto !important;
	}
	/deep/ .el-textarea__inner{
		line-height: 30px !important;
		padding: 0 15px !important;
	}
	.datecss /deep/ .el-input__inner {
	    padding: 0 15px 0 25px !important;
	}
</style>
